import { Component } from 'react';

export class App extends Component {
  // 构造函数中定义
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    // this.handleClick = this.handleClick.bind(this);
  }
  // 类的公有实例字段
  // state = {
  //   count: 1,
  // };

  // 事件绑定方法的抽离
  // handleClick() {
  //   console.log(this);
  //   this.setState({ count: this.state.count + 1 });
  // }

  // 类的公有实例字段
  handleClick = (e, step) => {
    console.log(this);
    this.setState({ count: this.state.count + step });
  };

  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        {/* 行内箭头函数 */}
        {/* <button onClick={() => this.handleClick()}>+1</button> */}
        <button onClick={(e) => this.handleClick(e, 4)}>+11</button>
      </div>
    );
  }
}
